<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>{{ 'menu.dashboard' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a [routerLink]="['/monitors']" [queryParams]="{ app: app ? app : '' }">
      <i nz-icon nzType="reconciliation"></i>
      <span>{{ 'monitors.list' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <span nz-icon nzType="pie-chart"></span>
    <span>{{ 'monitors.detail' | i18n }}</span>
    <a routerLink="/setting/define" [queryParams]="{ app: app }">
      <nz-tag style="font-size: 14px; border-radius: 4px; margin-left: 4px" nzColor="#3f51b5" class="hoverClass">
        <span>{{ 'monitor.app.' + app | i18n }}</span>
      </nz-tag>
    </a>
    <a [href]="'https://hertzbeat.com/docs/help/' + app" target="_blank" style="float: right; margin-right: 5%" class="mobile-hide">
      <button nz-button nzType="primary">
        <span>{{ 'common.button.help' | i18n }} </span>
        <span nz-icon nzType="question-circle"></span>
      </button>
    </a>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-layout>
  <nz-content>
    <nz-spin [nzSpinning]="isSpinning" nzTip="Loading..." nzSize="large">
      <nz-tabset nzType="card" [nzTabBarExtraContent]="tab_extra_template">
        <nz-tab [nzTitle]="titleTemplate" (nzClick)="loadRealTimeMetric()">
          <ng-template #titleTemplate>
            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
            {{ 'monitors.detail.realtime' | i18n }}
          </ng-template>
          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
            <div style="width: 50%; height: 400px; margin-bottom: 6px">
              <nz-card
                style="height: 100%; margin-left: 10px; overflow: scroll"
                [nzBordered]="true"
                [nzTitle]="monitor_basic_card_title"
                [nzExtra]="monitor_basic_card_extra"
              >
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitorId }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.name }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.host }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ port }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.description }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16">
                    <nz-tag *ngIf="monitor.status == 0" nzColor="default">
                      <i nz-icon nzType="meh" nzTheme="outline"></i>
                      <span>{{ 'monitor.status.unmonitored' | i18n }}</span>
                    </nz-tag>
                    <nz-tag *ngIf="monitor.status == 1" nzColor="success">
                      <i nz-icon nzType="smile" nzTheme="outline"></i>
                      <span>{{ 'monitor.status.available' | i18n }}</span>
                    </nz-tag>
                    <nz-tag *ngIf="monitor.status == 2" nzColor="error">
                      <i nz-icon nzType="frown" nzTheme="outline"></i>
                      <span>{{ 'monitor.status.unavailable' | i18n }}</span>
                    </nz-tag>
                  </div>
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.intervals }}s</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
                  >
                </div>
                <div nz-row nzGutter="16">
                  <div nz-col nzSpan="8"
                    ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
                  >
                  <div nz-col nzSpan="16"
                    ><p style="text-align: left">{{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</p></div
                  >
                </div>
              </nz-card>
            </div>
            <app-monitor-data-table
              style="width: 50%; height: 400px; margin-bottom: 6px"
              *ngFor="let metric of metrics; let i = index"
              [metrics]="metric"
              [monitorId]="monitorId"
              [app]="app"
            ></app-monitor-data-table>
          </div>
        </nz-tab>
        <nz-tab [nzTitle]="title2Template" (nzClick)="loadMetricChart()">
          <ng-template #title2Template>
            <i nz-icon nzType="line-chart" style="margin-left: 10px"></i>
            {{ 'monitors.detail.history' | i18n }}
          </ng-template>
          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
            <app-monitor-data-chart
              style="width: 50%; height: 500px; margin-bottom: 6px"
              *ngFor="let item of chartMetrics; let i = index"
              [app]="app"
              [metrics]="item.metrics"
              [metric]="item.metric"
              [unit]="item.unit"
              [monitorId]="monitorId"
            ></app-monitor-data-chart>
          </div>
        </nz-tab>
      </nz-tabset>
    </nz-spin>
  </nz-content>
</nz-layout>

<ng-template #monitor_basic_card_title>
  <p style="font-size: small; text-align: left; margin-bottom: 3px">{{ 'monitors.detail.basic' | i18n }}</p>
</ng-template>

<ng-template #monitor_basic_card_extra>
  <a nz-icon nzType="edit" nzTheme="outline" [routerLink]="['/monitors/' + monitorId + '/edit']"></a>
</ng-template>

<ng-template #tab_extra_template>
  <nz-button-group class="mobile-hide">
    <button nz-button nz-dropdown [nzDropdownMenu]="time_menu" nzPlacement="bottomLeft">
      <span *ngIf="deadline > 0"> {{ 'monitors.detail.auto-refresh' | i18n : { time: countDownTime } }} </span>
      <span *ngIf="deadline <= 0"> {{ 'monitors.detail.close-refresh' | i18n }} </span>
    </button>
    <button
      style="margin-left: 2px"
      nz-button
      nzType="primary"
      (click)="refreshMetrics()"
      nz-tooltip
      [nzTooltipTitle]="'common.refresh' | i18n"
    >
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>
  </nz-button-group>
  <nz-dropdown-menu #time_menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="configRefreshDeadline(10)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 10 } }} </li>
      <li nz-menu-item (click)="configRefreshDeadline(30)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 30 } }} </li>
      <li nz-menu-item (click)="configRefreshDeadline(60)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 60 } }} </li>
      <li nz-menu-item (click)="configRefreshDeadline(300)"> {{ 'monitors.detail.config-refresh' | i18n : { time: 300 } }} </li>
      <li nz-menu-item (click)="configRefreshDeadline(-1)"> {{ 'monitors.detail.close-refresh' | i18n }}</li>
    </ul>
  </nz-dropdown-menu>
</ng-template>
